<template>
 <div class="userManage">
    <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="状态" class="el_block">
            <el-radio-group v-model="form.status">
                 <el-radio label="全部"></el-radio>
                <el-radio label="未处理"></el-radio>
                <el-radio label="已处理"></el-radio>
            </el-radio-group>
        </el-form-item>
         <el-form-item label="姓名">
            <el-input type="text" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
            <el-input type="text" v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="就读年级">
            <el-select v-model="form.grade" placeholder="请选择就读年级">
            <el-option label="一年级" value="1"></el-option>
            <el-option label="二年级" value="2"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="就读/毕业学校">
            <el-input type="text" v-model="form.school"></el-input>
        </el-form-item>
        <el-form-item label="提交时间" class="dateWidth">
            <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
             <el-date-picker type="date" placeholder="选择日期" v-model="form.date2" style="width: 100%;"></el-date-picker>
            </el-col>
        </el-form-item> 
        <el-form-item label="数据来源">
            <el-select v-model="form.source" placeholder="请选择数据来源">
            <el-option label="source1" value="1"></el-option>
            <el-option label="source2" value="2"></el-option>
            </el-select> 
        </el-form-item> 
        <el-form-item label-width="80px">
            <el-button type="primary" @click="search">搜 索</el-button>
            <el-button type="success">导出搜索结果</el-button>
        </el-form-item>
    </el-form>
    <el-form class="form2">
        <el-form-item label-width="80px">
            <el-button type="primary" @click="batchProcess">批量处理</el-button>
            <el-button type="success">批量导出</el-button>
        </el-form-item>
    </el-form>
    
    <el-table :data="tableData2" :row-class-name="tableRowClassName" @selection-change="handleSelectChange">
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="id" label="序号"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>
        <el-table-column prop="grade" label="就读年级"></el-table-column>
        <el-table-column prop="school" label="就读/毕业学校"></el-table-column>
        <el-table-column prop="profession" label="就读/毕业专业"></el-table-column>
        <el-table-column prop="source" label="数据来源"></el-table-column>
        <el-table-column prop="time" label="提交时间" width="208"></el-table-column>
        <el-table-column prop="status" label="状态"></el-table-column>
        <el-table-column prop="operation" label="操作">
            <template scope="scope">
                <el-button type="text" size="small" @click="handle(scope.$index, tableData2)">处理</el-button>
                <el-button type="text" size="small">查看详情</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="block">
       <el-pagination :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalNum" :curPage="curPage" @size-change="handleSizeChange" @current-change="handleCurChange">
        </el-pagination>
    </div> 
 </div>
</template>
<script>
    import qs from 'qs';
    export default {
        data() {
            return {
                 form: {
                    status:'',
                    name: '',
                    phone: '',
                    grade:'',
                    school:'',
                    date1: '',
                    date2: '',
                    source:''
                },
                curPage:1,
                pageSizes:[1,2,3,4],
                pageSize:2, //每页条数默认
                totalNum:2,
                tableData2: [{
                    "id": "12",
                    "name": "翟大款",
                    "phone":"13526235463",
                    "grade":"二年级",
                    "school": "上海二中",
                    "profession": "广告",
                    "source":"学校",
                    "time":"2017-07-16  14：28：02",
                    "status":"未处理",
                    "operation":""
                    
                },
                {
                    "id": "13",
                    "name": "叮当",
                    "phone":"135235463",
                    "grade":"3年级",
                    "school": "二中",
                    "profession": "广告",
                    "source":"学校",
                    "time":"2017-07-16  14：28：02",
                    "status":"未处理",
                    "operation":""
                    
                },
                {
                    "id": "14",
                    "name": "王小虎",
                    "phone":"2635463",
                    "grade":"6二年级",
                    "school": "上海二中",
                    "profession": "广告",
                    "source":"学校",
                    "time":"2010-07-16  14：28：02",
                    "status":"未处理",
                    "operation":""
                    
                }],
                idArr:[]
            }
        },
        methods: {
            tableRowClassName(row, index) {
                if (index === 1) {
                    return 'info-row';
                } else if (index === 3) {
                    return 'positive-row';
                }
                return '';
            },
            search(){
                this.$http("../../../static/json/user.json",qs.stringify({
                    "status":this.form.status,
                    "name": this.form.name,
                    "phone": this.form.phone,
                    "content":this.form.content,
                    "date1":this.form.date1,
                    "date2": this.form.date2,
                    "source":this.form.source,
                    "curPage":this.curPage,  //当前页
                    "pageSize":this.pageSize //每页条数
                })).then(function(msg){
                    this.tableData2 = msg.data.data;
                    this.totalNum = msg.data.total;
                }.bind(this));
            },
            handle(index, data) {
                if(data[index].statusNum != 1){ //未处理过
                    this.$confirm('本操作仅能执行一次，处理后，该条数据状态由未处理变更为已处理。', '确认执行此操作？', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$message({
                            type: 'success',
                            message: '已处理!'
                        });
                        data[index].status = "已处理";
                        data[index].statusNum = 1;
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消处理'
                        });          
                    });
                }else{
                    this.tip();  //不能重复处理提示
                }
            },
            tip(){
                this.$message({
                message:'该条数据已处理过，不能重复处理！',
                tupe:'warning'
                });
            },
            handleSizeChange(val){   //每页条数变化时
                this.pageSize = val;
                this.search();
            },
            handleCurChange(val){  //当前页码时
                this.curPage = val;
                this.search();
            },
            handleSelectChange(val){
                var len = val.length;
                this.idArr.length = 0;
                if(len != 0){
                    for(var obj of val){
                        this.idArr.push(obj.id);
                    }
                }else{
                    return false;
                }
            },
            batchProcess(){
                console.log(this.idArr);
            }
        }
    }
</script>
<style>
   @import '../../assets/css/userManage.css';
</style>

